@mixin basePaddingMargin($maxVal) {
  @for $i from 0 to $maxVal {
    .p-#{$i} {
      padding: #{$i}px !important;
    }
    .pl-#{$i} {
      padding-left: #{$i}px !important;
    }
    .pr-#{$i} {
      padding-right: #{$i}px !important;
    }
    .pb-#{$i} {
      padding-bottom: #{$i}px !important;
    }
    .pt-#{$i} {
      padding-top: #{$i}px !important;
    }
    .pv-#{$i} {
      padding-top: #{$i}px !important;
      padding-bottom: #{$i}px !important;
    }
    .ph-#{$i} {
      padding-left: #{$i}px !important;
      padding-right: #{$i}px !important;
    }

    .m-#{$i} {
      margin: #{$i}px !important;
    }
    .ml-#{$i} {
      margin-left: #{$i}px !important;
    }
    .mr-#{$i} {
      margin-right: #{$i}px !important;
    }
    .mb-#{$i} {
      margin-bottom: #{$i}px !important;
    }
    .mt-#{$i} {
      margin-top: #{$i}px !important;
    }
    .mv-#{$i} {
      margin-top: #{$i}px !important;
      margin-bottom: #{$i}px !important;
    }
    .mh-#{$i} {
      margin-left: #{$i}px !important;
      margin-right: #{$i}px !important;
    }
  }
}

@mixin baseFontSize($minVal, $maxVal) {
  @for $i from $minVal to $maxVal {
    .f-sz-#{$i} {
      font-size: #{$i}px !important;
    }
  }
}

@mixin baseWidth($minVal, $maxVal, $step) {
  @for $i from $minVal to $maxVal {
    .w-#{$i * $step} {
      width: #{$i * $step}px !important;
    }
  }
}

@mixin baseHeight($minVal, $maxVal, $step) {
  @for $i from $minVal to $maxVal {
    .h-#{$i * $step} {
      height: #{$i * $step}px !important;
    }
  }
}

@include basePaddingMargin(200);
@include baseFontSize(12, 40);
@include baseWidth(1, 100, 10);
@include baseHeight(1, 100, 10);

body {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: left top;
}
